<template>
  <div
    class="carouselArea"
    :style="{ width: width + 'px', height: height + 'px' }"
  >
    <div class="carousel" ref="carousel">
      <i class="el-icon-arrow-left" @click="changePic(-1)" v-if="flag"></i>
      <i class="el-icon-arrow-right" @click="changePic(1)" v-if="flag"></i>
      <div class="main" ref="main">
        <slot></slot>
      </div>
    </div>
    <ul v-if="indicatorPosition === 'outside'">
      <li
        v-for="(item, index) in $slots.default"
        :key="index"
        @mouseenter="toPic(index)"
        :class="{ active: mainIndex === index }"
      ></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      mainIndex: 0,
      flag: true,
    };
  },
  props: {
    indicatorPosition: {
      type: String,
    },
    width: {
      type: Number,
      default: 500,
    },
    height: {
      type: Number,
      default: 300,
    },
    interval: {
      type: Number,
      default: 3000,
    },
    arrow: {
      type: String,
      default: "hover",
    },
    autoplay: {
      type: Boolean,
      default: true,
    },
    initialIndex: {
      type: Number,
      default: 0,
    },
  },
  provide() {
    return {
      width: this.width,
      height: this.height,
    };
  },
  created() {
    if (this.autoplay) {
      setInterval(() => {
        this.changePic(1);
      }, this.interval);
    }

    this.mainIndex = this.initialIndex;
  },

  mounted() {
    this.$refs.main.style.width =
      this.width * this.$slots.default.length + "px";
    this.$refs.main.style.height = this.height + "px";
    if (this.arrow === "always") {
      this.flag = true;
    } else if (this.arrow === "hover") {
      this.$refs.carousel.onmouseover = () => {
        this.flag = true;
      };
      this.$refs.carousel.onmouseleave = () => {
        this.flag = false;
      };
    } else {
      this.flag = false;
    }
  },
  methods: {
    changePic(num) {
      this.mainIndex += num;
      if (this.mainIndex < 0) {
        this.mainIndex = this.$slots.default.length - 1;
      }
      if (this.mainIndex > this.$slots.default.length - 1) {
        this.mainIndex = 0;
      }
      this.$refs.main.style.transform = `translateX(${
        this.mainIndex * -this.width
      }px)`;
    },
    toPic(index) {
      this.mainIndex = index;
      this.$refs.main.style.transform = `translateX(${
        this.mainIndex * -this.width
      }px)`;
    },
  },
};
</script>
<style lang='less'  scoped>
.carouselArea {
  position: relative;
}
.carousel {
  overflow: hidden;
  width: 100%;
  height: 100%;
  i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    &:first-of-type {
      left: 5%;
    }
    &:last-of-type {
      right: 5%;
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
.main {
  width: 2000px;
  // border: 1px solid #000;
  height: 100%;

  transition: all 1s;
}
/deep/.pic {
  //   float: left;
  background-color: yellow;
}
ul {
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  li {
    float: left;
    width: 30px;
    height: 5px;
    background-color: #ccc;
    margin-right: 5px;
    border-radius: 5px;
    &.active {
      background-color: #000;
    }
  }
}
</style>
